<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <style>
        a{
            color: #005980;
        }
        .widget-small-info h4{
            font-size: 18px;
        }
        .widget-small-info span{
            font-size: 16px;
        }
        .project-introduce h4{
            font-weight: bold;
            margin-top: 12px;
            margin-bottom: 8px;
        }
        .project-introduce li{
            list-style: decimal;
            margin-left: 28px;
        }

    </style>
</head>
<body class="timo-layout-page">
<div class="layui-row layui-col-space15">
    <div class="layui-col-md4">
        <div class="layui-card">
        <div class="layui-card-header">快捷方式</div>
        <div class="layui-card-body">
             <div class="index-shortcut">
                    <ul class="layui-row layui-col-space10 layui-this">
                        <li class="layui-col-xs3">
                            <a class="open-popup" data-title="添加字典" th:attr="data-url=@{/system/dict/add}" data-size="615,558">
                                <i class="layui-icon layui-icon-console"></i>
                                <cite>添加字典</cite>
                            </a>
                        </li>
                        <li class="layui-col-xs3">
                            <a class="open-popup" data-title="添加系统参数" th:attr="data-url=@{/system/param/add}" data-size="615,558">
                                <i class="layui-icon layui-icon-chart"></i>
                                <cite>添加系统参数</cite>
                            </a>
                        </li>
                        <li class="layui-col-xs3">
                            <a class="open-popup" data-title="增加外链" th:attr="data-url=@{/system/link/add}" data-size="615,558">
                                <i class="fa fa-unlink"></i>
                                <cite>增加外链</cite>
                            </a>
                        </li>
                        <li class="layui-col-xs3">
                            <a class="open-popup" data-title="增加菜单" th:attr="data-url=@{/system/menu/add}" data-size="615,558">
                                <i class="layui-icon layui-icon-chat"></i>
                                <cite>增加菜单</cite>
                            </a>
                        </li>
                        <li class="layui-col-xs3">
                            <a class="open-popup" data-title="增加关于" th:attr="data-url=@{/system/about/add}" data-size="615,558">
                                <i class="layui-icon layui-icon-find-fill"></i>
                                <cite>增加关于</cite>
                            </a>
                        </li>
                        <li class="layui-col-xs3">
                            <a class="open-popup" data-title="添加博文管理" th:attr="data-url=@{/system/article/add}" data-size="max">
                                <i class="layui-icon layui-icon-survey"></i>
                                <cite>写博客</cite>
                            </a>
                        </li>
                        <li class="layui-col-xs3">
                            <a onclick="layer.tips('功能后期开放', this, {tips: 3});">
                                <i class="fa fa-envelope-o"></i>
                                <cite>写邮件</cite>
                            </a>
                        </li>
                        <li class="layui-col-xs3">
                            <a class="open-popup" data-title="设置任务调度" th:attr="data-url=@{/system/scheduledTask/add}" data-size="615,558">
                                <i class="layui-icon layui-icon-set"></i>
                                <cite>设置任务调度</cite>
                            </a>
                        </li>
                    </ul>

                </div>
        </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">待办事项</div>
            <div class="layui-card-body" >

                <ul class="layui-row layui-col-space10 layui-this" lay-filter="layui-nav-side">
                    <li class="layui-col-xs6">
                        <a href="javascript:;" lay-url="/system/user/index" class="index-backlog-body">
                            <h3>今日用户</h3>
                            <p><cite>[[${users}]]</cite></p>
                        </a>
                    </li>
                    <li class="layui-col-xs6">
                        <a lay-href="app/forum/list.html" class="index-backlog-body">
                            <h3>今日访问</h3>
                            <p><cite>[[${nowPv}]]</cite></p>
                        </a>
                    </li>
                    <li class="layui-col-xs6">
                        <a lay-href="template/goodslist.html" class="index-backlog-body">
                            <h3>今日评论</h3>
                            <p><cite>[[${comments}]]</cite></p>
                        </a>
                    </li>
                    <li class="layui-col-xs6">
                        <a href="javascript:;" onclick="layer.tips('不跳转', this, {tips: 3});" class="index-backlog-body">
                            <h3>未读邮件</h3>
                            <p><cite>[[${ip}]]</cite></p>
                        </a>
                    </li>
                </ul>

            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">实时监控</div>
            <div class="layui-card-body index-takerates">
                <div class="layui-progress" lay-showpercent="yes" lay-filter="cpu">
                    <h3>CPU使用率</h3>
                    <div class="layui-progress-bar" lay-percent="0%"></div>
                </div>
                <div class="layui-progress" lay-showpercent="yes" lay-filter="mem">
                    <h3>内存占用率</h3>
                    <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--<div class="layui-row timo-card-screen">-->
    <!--<div class="pull-left layui-form-pane timo-search-box">-->
        <!--<div class="layui-inline">-->
            <!--<label class="layui-form-label">开始时间</label>-->
            <!--<div class="layui-input-inline">-->
                <!--<input type="text" class="layui-input" id="start" name="start" th:value="${start}" placeholder="yyyy-MM-dd">-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="layui-inline">-->
            <!--<label class="layui-form-label">结束时间</label>-->
            <!--<div class="layui-input-inline">-->
                <!--<input type="text" class="layui-input" id="end" name="end" th:value="${end}" placeholder="yyyy-MM-dd">-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="layui-inline">-->
            <!--<button class="layui-btn timo-search-btn">-->
                <!--<i class="fa fa-search"></i>-->
            <!--</button>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->
<div class="layui-row layui-col-space15">
    <div class="layui-col-md8">
        <div class="layui-card">
            <div class="layui-card-header">数据统计</div>
            <div class="layui-card-body" style="height: 300px">
                <div class="layui-btn-group">
                    <button type="button" class="layui-btn  layui-btn-sm count">Uv</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm count">Pv</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm count">Ip</button>
                </div>
                <div id="uv" style="width: 100%;height: 100%"></div>
            </div>
        </div>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">地域分布</div>
                    <div class="layui-card-body" style="height: 350px">
                        <div id="map" style="width: 100%;height: 100%"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">浏览器分布</div>
                    <div class="layui-card-body" style="height: 350px">
                        <div id="browser" style="width: 100%;height: 100%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">系统信息</div>
            <div class="layui-card-body layui-text">
                <table class="layui-table">
                    <colgroup>
                        <col width="100">
                        <col>
                    </colgroup>
                    <tbody>
                    <tr>
                        <td>系统类型</td>
                        <th th:text="${osInfo.os}"></th>
                    </tr>
                    <tr>
                        <td>CPU类别</td>
                        <th th:text="${osInfo.cpuModel}"></th>
                    </tr>
                    <tr>
                        <td>内存总量</td>
                        <th th:text="${osInfo.memTotal}"></th>
                    </tr>
                    <tr>
                        <td>网络类型</td>
                        <th th:text="${osInfo.netName}"></th>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">top 10</div>
            <div class="layui-card-body layui-text">
                <div class="layui-carousel index-carousel" id="test1" >
                    <div carousel-item>
                        <div>
                            <table class="layui-table">
                                <thead>
                                <tr>
                                    <th>来源网站</th>
                                    <th>浏览量(PV)</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="item:${fromUrls}">
                                    <td th:text="${item.url} == ''?'直接访问':${item.url}">来源网站</td>
                                    <td th:text="${item.value}">浏览量(PV)</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div>
                            <table class="layui-table">
                                <thead>
                                <tr>
                                    <th>入口地址</th>
                                    <th>浏览量(PV)</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="item:${nowUrls}">
                                    <td ><a th:href="${item.url}" target="_blank" th:text="${item.url}">人口地址</a></td>
                                    <td th:text="${item.value}">浏览量(PV)</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!--<div class="layui-col-md4">-->
        <!--<div class="layui-card">-->
            <!--<div class="layui-card-header">更新日志</div>-->
            <!--<div class="layui-card-body">-->
                <!--<ul class="layui-timeline">-->
                    <!--<li class="layui-timeline-item">-->
                        <!--<i class="layui-icon layui-timeline-axis">&#xe63f;</i>-->
                        <!--<div class="layui-timeline-content layui-text">-->
                            <!--<h3 class="layui-timeline-title">v1.0.2</h3>-->
                            <!--<p>-->
                               <!--1.增加邮件发送，定时系统。<br>-->
                                <!--2.增加对于url的权限管理。<br>-->
                                <!--3.加入启动初始化模块。<br>-->
                                <!--4.加入博客系统前台模块-->
                            <!--</p>-->
                        <!--</div>-->
                    <!--</li>-->
                    <!--<li class="layui-timeline-item">-->
                        <!--<i class="layui-icon layui-timeline-axis">&#xe63f;</i>-->
                        <!--<div class="layui-timeline-content layui-text">-->
                            <!--<h3 class="layui-timeline-title">v1.0.1</h3>-->
                            <!--<p>-->
                                <!--1.加入博客系统<br>-->
                                <!--2.包括：评论，笔记，博文，类别，标签等功能<br>-->
                                <!--3.修改后台系统名称为小懒虫-->
                            <!--</p>-->
                        <!--</div>-->
                    <!--</li>-->
                    <!--<li class="layui-timeline-item">-->
                        <!--<i class="layui-icon layui-timeline-axis">&#xe63f;</i>-->
                        <!--<div class="layui-timeline-content layui-text">-->
                            <!--<h3 class="layui-timeline-title">v1.0</h3>-->
                            <!--<p>-->
                                <!--正式发布v1.0系统<br>-->
                                <!--1.基于TIMO后台管理系统<br>-->
                                <!--2.增加系统参数功能，前台可以用[/[/${#params.value(参数名称)}}]]使用<br>-->
                                <!--3.去除ztree插件，使用layui的tree.<br>-->
                                <!--4.增加图标的点击选择-->
                            <!--</p>-->
                        <!--</div>-->
                    <!--</li>-->
                    <!--<li class="layui-timeline-item">-->
                        <!--<i class="layui-icon layui-timeline-axis">&#xe63f;</i>-->
                        <!--<div class="layui-timeline-content layui-text">-->
                            <!--<div class="layui-timeline-title">小海豚</div>-->
                        <!--</div>-->
                    <!--</li>-->
                <!--</ul>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
</div>
<script th:replace="/common/template :: script"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>

<script th:inline="javascript">
    layui.use(['laydate','carousel','element'], function() {
        var laydate = layui.laydate;
        var $ = layui.$;
        var element = layui.element;
        //常规用法
        laydate.render({
            elem: '#start'
        });

        //国际版
        laydate.render({
            elem: '#end'
            , lang: 'en'
        });
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'none' //始终显示箭头
            ,autoplay:false
            ,height: '490px'
            //,anim: 'updown' //切换动画方式
        });

        $.get("/system/main/map",function (data) {
            console.log(data);
            data.forEach((item, index) => {
                item.name = item.name.replace('市','').replace('省','');
            });
            createMap(data);
        });
        // setInterval(function(){
        // $.get("/system/main/systemStatus",function (data) {
        //     element.progress('cpu',data.cpu);
        //     element.progress('mem',data.mem);
        // });},1000);
       websocket(element);

        $.get("/system/uv/countUv?type=Uv",function (data) {
            createLine(data);
        });
        $.get("/system/uv/countBrowser",function (data) {
            createbrowser(data);
        });
        $(".count").on("click", function () {
            $(".count") .addClass("layui-btn-primary");
            $(this).removeClass("layui-btn-primary");
            $.get("/system/uv/countUv?type="+$(this).text(),function (data) {
                createLine(data);
            });
        });

    });
    function createLine(dataList) {
        var dom = document.getElementById("uv");
        var myChart = echarts.init(dom);
        var option = {
            legend: {},
            tooltip: {},
            dataset: {
                // 提供一份数据。
                dimensions: ['Uv', '今天', '昨天'],
                source: dataList
            },
            // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
            xAxis: {type: 'category'},
            // 声明一个 Y 轴，数值轴。
            yAxis: {},
            // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
            series: [
                {type: 'line'},
                {type: 'line'}
            ],
            color: ['#ca8622', '#51d41d']

        }

        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }
    function createbrowser(dataList) {
        var dom = document.getElementById("browser");
        var myChart = echarts.init(dom);
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series: [
                {
                    name: '访问浏览器',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: dataList.sort(function (a, b) { return a.value - b.value; }),
                    label: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
                    labelLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    }
                }
            ]
        };

        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }
    function createMap(dataList) {
        var myChart = echarts.init(document.getElementById('map'));
        option = {
            tooltip: {
                formatter:function(params,ticket, callback){
                    return params.seriesName+'<br />'+params.name+'：'+params.value
                }
            },
            visualMap: {
                min: 0,
                max: 100,
                left: 'left',
                top: 'bottom',
                text: ['高','低'],
                inRange: {
                    color: ['#e0ffff', '#006edd']
                },
                show:true
            },
            geo: {
                map: 'china',
                roam: false,
                zoom:1.23,
                label: {
                    normal: {
                        show: true,
                        fontSize:'10',
                        color: 'rgba(0,0,0,0.7)'
                    }
                },
                itemStyle: {
                    normal:{
                        borderColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    emphasis:{
                        areaColor: '#F3B329',
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            series : [
                {
                    name: '信息量',
                    type: 'map',
                    geoIndex: 0,
                    data:dataList
                }
            ]
        };
        myChart.setOption(option);
    }

    function websocket(element) {
        var websocket = null;


        //判断当前浏览器是否支持WebSocket
        if('WebSocket' in window){
            //连接WebSocket节点
            websocket = new WebSocket("wss://"+document.domain+":443/websocketHandle/001");        }
        else{
            alert('Not support websocket')
        }


        //连接发生错误的回调方法
        websocket.onerror = function(){
            setMessageInnerHTML("error");
        };


        //连接成功建立的回调方法
        websocket.onopen = function(event){
            setMessageInnerHTML("open");
        }


        //接收到消息的回调方法
        websocket.onmessage = function(event){
            try {
                setMessageInnerHTML(JSON.parse(event.data));
            }catch (e) {
                console.log(event.data);
            }

        }


        //连接关闭的回调方法
        websocket.onclose = function(){
            setMessageInnerHTML("close");
        }


        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function(){
            websocket.close();
        }
        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML){
               //  var data = JSON.parse(innerHTML);

                element.progress('cpu',innerHTML.cpu);
                element.progress('mem',innerHTML.mem);
        }
    }


</script>
</body>
</html>

